<template>
    <div>
        <p>{{ name }}</p>
        <p>{{ address }}</p>
        <!-- 2.在此处传递方法给子组件 -->
        <Headmaster :addStudent="addStudent"></Headmaster>
        <ul>
            <Student
                v-for="student in students"
                :key="student.id"
                :student="student"
            ></Student>
        </ul>
    </div>
</template>

<script>
import Student from "./Student.vue";
import Headmaster from "./Headmaster.vue";
import { nanoid } from "nanoid";

export default {
    name: "School",
    components: {
        Student,
        Headmaster,
    },
    data() {
        return {
            name: "希望小学",
            address: "红buff上草",
            students: [
                { id: nanoid(), name: "小航" },
                { id: nanoid(), name: "小孙" },
                { id: nanoid(), name: "小燕" },
            ],
        };
    },
    methods: {
        // 1.定义添加学生的方法
        addStudent(student) {
            this.students.unshift(student);
        },
    },
};
</script>

<style></style>
